import './Header.scss';
import { observer } from 'mobx-react';
import { useEffect, useState } from 'react';
import { Link } from '../../components/Link';
import { Profile } from '../Profile/Profile';
import { LoginRegisterModal } from '../Login/LoginModal';
import { userStore } from '../../stores/UserStore';
import Icons from '../../images/images';
import eventBus from '../../utils/eventBus';
import { ResearchNav } from '../Research/ResearchNav';
import '../Research/Research.scss';

export const Headers = observer(() => {
    const [style, setStyle] = useState('');
    const [showReseatchNav, setReseatchNav] = useState(false);
    const [useWhiteBg, setWhiteBg] = useState(false);
    eventBus.addListener('changeWhiteHeaderBg', (value: boolean) => {
        setWhiteBg(value);
    })

    eventBus.addListener('fullScreen', (value: boolean) => {
        if (value) {
            setStyle(' hide');
        } else {
            setStyle('show');
        }
    })
    const headDisplay = (scrollTop: number, scrollDirection: string) => {
        if (scrollDirection == 'down') {
            //页面向下滚动要做的事情
            if (style != ' hide') {
                setStyle(' hide');
            }
        }
        else if (scrollDirection == 'up') {
            if (scrollTop <= 5 && style.indexOf('hide') == -1) {
                setStyle('');
            } else {
                //页面向上滚动要做的事情
                if (style.indexOf('navbarFloat') == -1) {
                    setStyle('show navbarFloat');
                    var path: string = window.location.pathname;
                    if (path == '/research') {
                        var researchContent: any = document.getElementsByClassName('researchContent')[0];
                        var _top = researchContent.offsetTop;
                        if (scrollTop >= _top) {
                            setReseatchNav(true);
                        } else {
                            setReseatchNav(false);

                        }
                    }
                }
            }
        }
    }
    var scrollAction: any = { x: 'undefined', y: 'undefined' };
    var scrollDirection: any;
    function scrollFunc() {
        if (typeof scrollAction.x == 'undefined') {
            scrollAction.x = window.pageXOffset;
            scrollAction.y = window.pageYOffset;
        }
        var diffX = scrollAction.x - window.pageXOffset;
        var diffY = scrollAction.y - window.pageYOffset;
        if (diffX < 0) {
            scrollDirection = 'right';
        } else if (diffX > 0) {
            scrollDirection = 'left';
        } else if (diffY < 0) {
            scrollDirection = 'down';
        } else if (diffY > 0) {
            scrollDirection = 'up';
        } else {
            // First scroll event
        }
        scrollAction.x = window.pageXOffset;
        scrollAction.y = window.pageYOffset;
    }
    window.onscroll = function () {
        var scrollTop =
            document.documentElement.scrollTop || document.body.scrollTop;
        //变量windowHeight是可视区的高度
        var windowHeight =
            document.documentElement.clientHeight || document.body.clientHeight;
        //变量scrollHeight是滚动条的总高度
        var scrollHeight =
            document.documentElement.scrollHeight || document.body.scrollHeight;
        var footer = document.getElementsByClassName('footerWrapper')[0];
        //滚动条到底部的条件
        scrollFunc();
        headDisplay(scrollTop, scrollDirection);
        if (footer && (scrollTop + windowHeight + footer.clientHeight > scrollHeight)) {
            eventBus.emit('toBottom');
        }
    };
    return (
        <div className="wf-section">
            <div data-collapse="medium" data-animation="default" data-duration="400"
                data-w-id="3cfeacf6-ec79-e4c7-6d36-de2c83e5ca49" role="banner" className={`${useWhiteBg ? 'whiteNav' : 'navbar'} w-nav ${style}`}
            >
                <div className="tv-header header tv-header__top js-site-header-container tv-header--sticky tv-header--promo tv-header--animated">
                    <div className="tv-header__backdrop"
                    >

                    </div>
                    <div className="tv-header__inner">
                        <div className="tv-header__area tv-header__area--logo-menu">
                            <span className="tv-header__logo">
                                <a href="javascript:;" className="tv-header__link tv-header__link--logo">
                                    <span className="tv-header__icon">
                                        <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100px" height="60px" viewBox="0 0 1000 772" enable-background="new 0 0 1000 772" >  <image id="image0" width="1000" height="772" x="0" y="0"
                                            href={Icons.logo} ></image>
                                        </svg>
                                    </span>
                                </a>
                            </span>
                        </div>

                        <div className="tv-header__middle-content">
                            <div className="tv-header__area tv-header__area--menu js-header-main-menu">

                                <div className="tv-mainmenu">
                                    <ul className="tv-mainmenu__list js-header-main-menu-list">
                                        <li className="tv-mainmenu__item">
                                            <Link to={'/'}>
                                                主页
                                            </Link>
                                        </li>

                                        <li className="tv-mainmenu__item news">
                                            <Link to={'/advantage'}>
                                                优势
                                            </Link>

                                        </li>
                                        <li className="tv-mainmenu__item news">
                                            <Link to={'/incubator'}>
                                                孵化器
                                            </Link>
                                        </li>
                                        <li className="tv-mainmenu__item">
                                            <Link to={'/news'}>
                                                合作
                                            </Link>
                                        </li>
                                        <li className="tv-mainmenu__item">
                                            <Link to={'/aboutUs'}>
                                                关于我们
                                            </Link>
                                        </li>

                                        <li className="tv-mainmenu__item">
                                            <Link to={'/contactUs'}>
                                                联系我们
                                            </Link>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        {/* <div style={{ marginRight: '20px' }}>
                            {userStore.userInfo ? <Profile /> : <div>
                                <button type="button" style={{ background: 'none' }} onClick={() => {
                                    userStore.loginModalVisible = true;
                                }} >
                                    <svg width="28" height="28" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg">
                                        <path fillRule="evenodd" d="M17.5 9c0 1.14-.3 1.99-.79 2.54-.46.52-1.27.96-2.71.96s-2.25-.44-2.71-.96A3.74 3.74 0 0 1 10.5 9c0-1.14.3-1.99.79-2.54.46-.52 1.27-.96 2.71-.96s2.25.44 2.71.96c.5.55.79 1.4.79 2.54zM19 9c0 2.76-1.45 5-5 5s-5-2.24-5-5 1.45-5 5-5 5 2.24 5 5zm-8 8.5h6c2.04 0 3.1.5 3.76 1.1.69.63 1.11 1.55 1.5 2.8.13.42.04.95-.29 1.4-.33.46-.8.7-1.22.7H7.25c-.43 0-.89-.24-1.22-.7a1.61 1.61 0 0 1-.3-1.4 6.08 6.08 0 0 1 1.51-2.8c.65-.6 1.72-1.1 3.76-1.1zm6-1.5h-6c-4.6 0-5.88 2.33-6.7 4.96-.58 1.89.97 4.04 2.95 4.04h13.5c1.98 0 3.53-2.15 2.95-4.04C22.88 18.33 21.6 16 17 16z" fill="currentColor">
                                        </path>
                                    </svg>
                                </button>
                                <LoginRegisterModal visible={userStore.loginModalVisible} cancle={() => { userStore.loginModalVisible = false }} />
                            </div>

                            }
                        </div> */}
                    </div>
                </div>
                {/* {showReseatchNav && <div style={{ marginTop: '20px', paddingRight: '25px' }}>
                    <ResearchNav />
                </div>} */}

            </div>

        </div>)
})